import { Table } from '@/components/Table';
import { useReducer } from 'react';
import { Button } from 'antd';

export default function TableExample() {
  const columns = [
    { key: 'name', title: '姓名' },
    { key: 'age', title: '年龄' },
    { key: 'email', title: '邮箱' },
    {
      key: 'action',
      title: '操作',
      render: (value: any, record: any) => {
        return (
          <>
            <Button onClick={() => editFn(record)} style={{ marginRight: 10 }}>
              编辑
            </Button>
            <Button danger onClick={() => deleteFn(record)}>
              删除
            </Button>
          </>
        );
      },
    },
  ];
  const data = [
    { key: '1', name: '张三', age: 20, email: 'zhangsan@example.com' },
    { key: '2', name: '李四', age: 21, email: 'lisi@example.com' },
    { key: '3', name: '李四1', age: 21, email: 'lisi1@example.com' },
    { key: '4', name: '李四2', age: 21, email: 'lisi2@example.com' },
    { key: '5', name: '李四3', age: 21, email: 'lisi3@example.com' },
    { key: '6', name: '李四4', age: 21, email: 'lisi4@example.com' },

    { key: '7', name: '张三1', age: 20, email: 'zhangsan@example.com' },
    { key: '8', name: '李四1', age: 21, email: 'lisi@example.com' },
    { key: '9', name: '李四1', age: 21, email: 'lisi1@example.com' },
    { key: '10', name: '李四2', age: 21, email: 'lisi2@example.com' },
    { key: '11', name: '李四3', age: 21, email: 'lisi3@example.com' },
    { key: '12', name: '李四4', age: 21, email: 'lisi4@example.com' },

    { key: '13', name: '张三', age: 20, email: 'zhangsan@example.com' },
    { key: '14', name: '李四', age: 21, email: 'lisi@example.com' },
    { key: '15', name: '李四1', age: 21, email: 'lisi1@example.com' },
    { key: '16', name: '李四2', age: 21, email: 'lisi2@example.com' },
    { key: '17', name: '李四3', age: 21, email: 'lisi3@example.com' },
    { key: '18', name: '李四4', age: 21, email: 'lisi4@example.com' },

    { key: '19', name: '张三', age: 20, email: 'zhangsan@example.com' },
    { key: '20', name: '李四', age: 21, email: 'lisi@example.com' },
    { key: '21', name: '李四1', age: 21, email: 'lisi1@example.com' },
    { key: '22', name: '李四2', age: 21, email: 'lisi2@example.com' },
    { key: '23', name: '李四3', age: 21, email: 'lisi3@example.com' },
    { key: '24', name: '李四4', age: 21, email: 'lisi4@example.com' },
  ];

  const [state, dispatch] = useReducer(reducer, data);

  function editFn(record: any) {
    dispatch({ type: 'edit', key: record.key, payload: record });
  }
  function deleteFn(record: any) {
    dispatch({ type: 'delete', key: record.key });
  }

  return <Table columns={columns} data={state} />;
}

function reducer(state: any, action: any) {
  if (action.type === 'edit') {
    return state.map((item: any) => {
      if (item.key === action.key) {
        return { ...item, ...action.payload };
      }
      return item;
    });
  } else if (action.type === 'delete') {
    return state.filter((item: any) => item.key !== action.key);
  }
  return state;
}
